<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员管理</title>
    <script src="static/vue.js"></script>
    <script src="static/vue-router.js"></script>
    <script src="static/axios.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 60px;
            background-color: rgba(0, 40, 77, 1);
        }

        .container {
            display: flex;
            flex: 1;
        }

        .container .left {
            width: 280px;
            font-size: 16px;
            background-color: rgba(0, 21, 41, 1);
        }
        .leftli{
            margin-top: 20px;
        }
        .leftli img{
            width: 25px;
            height: 25px;
        }
        .leftli{
            font-size: 20px;
        }
        .left img:nth-child(1){
            margin-left: 10px;
        }
        .left span{
            margin: 0 10px;
        }
        .container .right {
            flex: 1;
            background-color: #f2f2f2;
            padding: 20px;
        }

        .content {
            width: 100%;
            height: 100%;
            background-color: #fff;
            overflow: hidden;
        }

        .title {
            font-size: 22px;
            color: #fff;
            line-height: 60px;
            margin-left: 26px;
            display: inline-block;
        }

        .header .right {
            float: right;
            height: 60px;
        }

        .header .exit {
            font-size: 14px;
            color: #fff;
            line-height: 60px;
            cursor: pointer;
            margin-right: 16px;
        }

        .header .username {
            color: #fff;
            cursor: pointer;
            margin-right: 25px;
        }

        .touxiang {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #fff;
            position: relative;
            border-radius: 50%;
            top: 12px;
            left: -8px;
            cursor: pointer;
        }

        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }

        .menu-title {
            color: #fff;
        }

        .menu-sub-title {
            color: #aeaeae;
        }

        li {
            list-style: none;
        }

        .manages {
            width: 97%;
            /* margin: 50px 20px 15px 20px;*/
            font-family: 'Microsoft Tai Le Regular', 'Microsoft Tai Le';
        }

        .manage1 {
            width: 100%;
        }

        .manage1 ul {
            padding: 15px 15px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;

        }

        .manage1 span {
            color: rgba(0, 0, 0, 0.847058823529412);
        }

        .manage1 input {
            width: 89px;
            height: 30px;
            border-radius: 4px;
            color: rgba(0, 0, 0, 0.247058823529412);
        }

        .manage1 select {
            display: inline-block;
            width: 130px;
            height: 32px;
            border-radius: 4px;
            color: rgba(0, 0, 0, 0.247058823529412);
        }

        .manage2 {
            width: 100%;
            text-align: center;
        }

        .btn {
            width: 60px;
            height: 30px;
            border-radius: 4px;
            color: rgba(0, 0, 0, 0.647058823529412);
            border: 1px solid rgba(232, 232, 232, 1);
        }

        .manage2 button:nth-child(2) {
            margin-left: 14px;
        }

        .change {
            color: #FFFFFF;
            background-color: rgba(24, 144, 255, 1);
        }

        .manage3 {
            margin-top: 10px;
        }

        .manage3 div {
            width: 100px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            color: rgba(0, 0, 0, 0.647058823529412);
            float: right;
            border-radius: 4px;
            border: 1px solid rgba(217, 217, 217, 1);;
        }

        .manage3 div:nth-child(1) {
            margin-right: 10px;
        }

        .manage3 div:nth-child(2) {
            margin-right: 10px;
        }

        .manage4 {

            margin-top: 100px;

        }

        .manage4 table {
            width: 96%;
            margin: 0 auto;
            border-collapse: collapse;
        }

        .manage4 tr {
            width: 1006px;
            height: 54px;
            border-bottom: 1px solid rgba(232, 232, 232, 1);
            background-color: rgba(250, 250, 250, 1);
        }

        .manage4 td:nth-child(1) {
            padding-left: 18px;
        }

        .tr1 {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.847058823529412);
            font-weight: 700;
        }

        .tr2 {
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.647058823529412);
        }

        .manage4 span {
            font-size: 14px;
            color: #1890FF;
            font-weight: 400;
        }

        .manage4 span:nth-child(1) {

        }

        .manage4 span:nth-child(2) {
            margin-left: 10px;
        }

        .manage5 {
            margin-top: 30px;
            display: flex;
            flex-direction: row-reverse;
        }

        .manage5 div {
            margin-right: 8px;
        }

        .manage51 {
            width: 31px;
            height: 29px;
            line-height: 29px;
            text-align: center;
            font-size: 14px;
            color: #666666;
            border: 1px solid rgba(232, 232, 232, 1);
        }

        .manage52 {
            height: 29px;
            line-height: 29px;
            font-size: 14px;
            font-weight: 400;
            font-style: normal;
            color: rgba(0, 0, 0, 0.647058823529412);
        }

    </style>
</head>

<body>
<div id="app">
    <router-view></router-view>
</div>
<template id="manage">
    <div>
        <div class="header">
            <div class="title">
                厦门市思明区人民法院投票系统
            </div>
            <div class="right">
                <span class="touxiang">
                    <img class="center" :src="logo" alt="" width="46" height="46">
                </span>
                <span class="username">{{username}}</span>
                <span class="exit">退出</span>
            </div>
        </div>
        <div class="container">
            <div class="left">
                <ul>
                    <li v-for="(item,index) in menu">
                        <div @click="subshow(index)" class="leftli">
                            <img src="tpimg/u9.png" alt="">
                            <span class="menu-title">{{item.title}}</span>
                            <img v-if="item.children && item.children.length != 0" src="tpimg/u17.png" alt="">
                        </div>
                        <ul v-if="item.children_show">
                            <li v-for="child in item.children" class="menu-sub-title">
                                {{child.title}}
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="manages">
                    <div class="manage1">
                        <ul>
                            <li>
                                <span>姓名：</span>
                                <input type="text" placeholder="请输入">
                            </li>

                            <li v-for="(item,index) in list">
                                <span>{{item.name}}</span>
                                <select>
                                    <option value="">请选择</option>
                                    <option value="">{{item.op1}}</option>
                                    <option value="">{{item.op2}}</option>
                                    <option value="">{{item.op3}}</option>
                                </select>
                            </li>
                        </ul>
                    </div>
                    <div class="manage2">
                        <button class="btn" @click="btn1" :class="{change:c}">查询</button>
                        <button class="btn" @click="btn2" :class="{change:!c}">重置</button>
                    </div>
                    <div class="manage3">
                        <div>单个增加</div>
                        <div>批量导入</div>
                    </div>
                    <div class="manage4">
                        <table>
                            <tr class="tr1">
                                <td>名字</td>
                                <td>性别</td>
                                <td>部门</td>
                                <td>职务</td>
                                <td>职级</td>
                                <td>法官等级</td>
                                <td>所属类别</td>
                                <td>操作</td>
                            </tr>
                            <tr v-for="(item,index) in tb" class="tr2">

                                <td>{{item.name}}</td>
                                <td>{{item.sex}}</td>
                                <td>{{item.branch}}</td>
                                <td>{{item.post}}</td>
                                <td>{{item.level}}</td>
                                <td>{{item.grade}}</td>
                                <td>{{item.genre}}</td>
                                <td><span>编辑</span><span>删除</span></td>
                            </tr>
                        </table>
                    </div>
                    <div class="manage5">
                        <div v-for="(item,index) in divs" class="manage51" :class="{change:item.ch }" @click="choose(index)">
                            {{item.name}}
                        </div>
                        <div class="manage52">总共有85个项目</div>

                    </div>
                </div>
            </div>
            <!--------------------------------->
        </div>
    </div>

    </div>
</template>
<script>
    var manage = Vue.extend({
        template: "#manage",
        data() {
            return {
                username: "admin",
                logo: 'tpimg/u59.png',
                menu: [],
                c: true,
                list: [
                    {
                        name: "部门",
                        op1: "部门一",
                        op2: "部门二",
                        op3: "部门三",
                    },
                    {
                        name: "职级",
                        op1: "正科",
                        op2: "副处",
                        op3: "科员",
                    },
                    {
                        name: "职务",
                        op1: "书记员",
                        op2: "法院助理",
                        op3: "科员",
                    },
                    {
                        name: "法官等级",
                        op1: "一级高级法官",
                        op2: "二级高级法官",
                        op3: "三级高级法官",
                    },
                    {

                        name: "所属类别",
                        op1: "院领导",
                        op2: "中层领导",
                        op3: "普通干警",
                    },
                ],
                tb: [],
                divs: [
                    {name: ">", ch: false},
                    {name: "5", ch: false},
                    {name: "4", ch: false},
                    {name: "3", ch: false},
                    {name: "2", ch: false},
                    {name: "1", ch: true},
                    {name: "<", ch: false},
                ],
                username: "admin",
                logo: 'tpimg/u59.png',
                menu: [

                ],
                pclist:[

                ]
            }
        },

        methods: {
            subshow(index) {
                this.menu[index].children_show = !this.menu[index].children_show;
            },
            btn1() {
                if (!this.c) {
                    this.c = true;
                }
            },
            btn2() {
                if (this.c) {
                    this.c = false;
                }
            },
            choose(index) {
                for (var i = 0; i < this.divs.length; i++) {
                    if (Math.abs(i-6) == index) {
                        this.divs[Math.abs(i-6)].ch = true;
                    }
                    else {
                        this.divs[Math.abs(i-6)].ch = false;
                    }
                }
            }
        },
        created() {
            var _this = this;
            axios.post(
                'https://mockapi.eolinker.com/xx3S3Ha118800c38fa6132a898e6ee4aabb33b7b96a3587/index?index=1'
            ).then(function (res) {
                _this.username = res.data.username;
                _this.logo = res.data.logo;
            });
            axios.post('https://mockapi.eolinker.com/xx3S3Ha118800c38fa6132a898e6ee4aabb33b7b96a3587/liebiao?list=1')
                .then(function (res) {
                    _this.menu = res.data;
                })
            axios.post("https://mockapi.eolinker.com/j6J4zBgdb0245c938fe2b74ccf103c7d1d65d6269949aaf/toupiao?id=1")
                .then(
                    function (res) {
                        _this.tb = res.data;
                    }
                )
        }
    });
    var router = new VueRouter({
        routes: [
            {path: "/", component: manage, name: "manages"}
        ]
    });
    var vue = new Vue({
        el: "#app",
        router,
        data: {}
    });

</script>
</body>
</html>